<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        迭代器(iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。
        任何数据结构只要部署iterator接口,就可以完成遍历操作

        1.ES6 创造了一种新的遍历命令 for...of循环, iterator接口主要供 for...of 消费
        (任何数据结构,只要部署了iterator接口,就可以用for...of遍历)
        iterator接口 就是指对象里面的一个属性, 属性的名字叫 Symbol.iterator

        2.原生具备iterator接口的数据(可用 for...of 遍历)
            1.Array
            2.Arguments
            3.Set
            4.Map
            5.String
            6.TypeArray
            7.NodeList

        3.工作原理
            1.创建一个指针对象,指向当前数据结构的起始位置
            2.第一次调用对象的next方法,指针自动指向数据结构的第一个成员
            3.接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
            4.每次调用next()返回一个包含 value(值) 和 done(遍历是否完成) 属性的对象
            需要自定义遍历数据的时候,要想到迭代器!!!!!!!

     -->

    <script>

        //声明一个数组 
        const xy = ['唐僧', '孙悟空', '猪八戒', '沙僧']

        // 使用for of 遍历 键值
        for(let v of xy) {
            console.log(v) // '唐僧', '孙悟空', '猪八戒', '沙僧'
        }
        //键名
        for(let v in xy) {
            console.log(v) // 0 1 2 3
        }
        console.log(xy) // xy.prototype上存在 Symbol.iterator

        let iterator = xy[Symbol.iterator]()
        console.log(iterator) // prototype上存在 next()方法

        // 调用对象的next方法 done为true 表示遍历完成
        console.log(iterator.next()) // {value: '唐僧', done: false}
        console.log(iterator.next()) // {value: '孙悟空', done: false}
        console.log(iterator.next()) // {value: '猪八戒', done: false}
        console.log(iterator.next()) // {value: '沙僧', done: false}
        console.log(iterator.next()) // {value: undefined, done: true} 
    </script>
</body>
</html>